<template>
  <div class="app-container">
    <el-card>
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="客户姓名">
          <el-input
            v-model="queryParams.applyName"
            placeholder="请输入客户姓名"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="服务状态">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择服务状态"
            style="width: 240px"
          >
            <el-option
              v-for="dict in order_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="下单时间" style="font-weight: 700">
          <el-date-picker
            v-model="queryParams.beginTime"
            type="date"
            placeholder="选择开始时间"
            value-format="YYYY-MM-DD"
          />
          ~
          <el-date-picker
            v-model="queryParams.endTime"
            type="date"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search"
@click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain
icon="Plus" @click="add"
            >新增</el-button
          >
        </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
        v-loading="loading"
        :data="postList"
        stripe
        border
        max-height="500"
      >
        <el-table-column
          label="工单编号"
          align="center"
          prop="workOrderCode"
          width="200"
        />
        <el-table-column
          label="客户姓名"
          align="center"
          prop="applyName"
          width="100"
        />
        <el-table-column label="性别" align="center" width="80">
          <template #default="scope">
            <span>
              {{
                sys_user_sex.find((item) => item.value == scope.row.sex)
                  ? sys_user_sex.find((item) => item.value == scope.row.sex)
                      .label
                  : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" align="center" prop="age" width="80" />
        <el-table-column
          label="联系电话"
          align="center"
          prop="telephone"
          width="150"
        />

        <el-table-column
          label="服务项目"
          align="center"
          prop="name"
          width="120"
        />
        <el-table-column label="合计金额" align="center" prop="totalPrice" >
          <template #default="scope">
            <span>
              {{
                scope.row.totalPrice.toFixed(2)
              }}
            </span>
          </template>

        </el-table-column>
        <el-table-column
          label="社区站点"
          align="center"
          prop="communitySiteName"
        />
        <el-table-column
          label="服务人员"
          align="center"
          prop="communitySitePersonnelName"
        />
        <el-table-column label="下单时间" align="center" prop="createTime" />
        <el-table-column label="服务状态" align="center">
          <template #default="scope">
            <span>
              {{
                order_status.find((item) => item.value == scope.row.status)
                  ? order_status.find((item) => item.value == scope.row.status)
                      .label
                  : ""
              }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="230"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              v-if="
                scope.row.status == '1' ||
                scope.row.status == '2' ||
                scope.row.status == '0'
              "
              @click="handEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              @click="edit(scope.row)"
              v-if="scope.row.status == '0'"
              >分派</el-button
            >
            <el-button
              link
              type="primary"
              @click="edit(scope.row)"
              v-if="scope.row.status == '1' || scope.row.status == '2'"
              >改派</el-button
            >
            <el-button
              link
              type="primary"
              @click="handleDelete(scope.row)"
              v-if="
                scope.row.status == '1' ||
                scope.row.status == '2' ||
                scope.row.status == '0'
              "
              >取消</el-button
            >
            <el-button link type="primary"
@click="handinfo(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.limit"
        @pagination="getList"
      />
    </el-card>
    <el-dialog
      v-model="open"
      :title="title"
      append-to-body
      width="800px"
      v-if="open"
      @close="cancel"
      :close-on-click-modal="false"
    >
      <el-form
        ref="orderManageRef"
        :model="form"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item label="工单编号" style="font-weight: 700">
          <span>{{ form.workOrderCode }}</span>
        </el-form-item>

        <el-form-item label="社区驿站" prop="communitySiteId">
          <el-select
            v-model="form.communitySiteId"
            @change="changeCommunity"
            clearable
            placeholder="请选择社区驿站"
            style="width: 100%"
          >
            <el-option
              v-for="dict in CommunityList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务人员" prop="communitySitePersonnelId">
          <el-select
            v-model="form.communitySitePersonnelId"
            clearable
            placeholder="请选择服务人员"
            style="width: 100%"
          >
            <el-option
              v-for="dict in people"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormDebounceHandler"
            >保 存</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加或修改岗位对话框 -->
  </div>
</template>

<script setup name="orderManage">
import { serviceItemDel } from "@/api/homeBed";

const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex, project_type, order_status } =
  proxy.useDict(
    "sys_normal_disable",
    "sys_user_sex",
    "project_type",
    "order_status",
  );
const router = useRouter();

import { debounce } from "@/utils/debounce.js";
import {
  workOrderList,
  getCommunitySiteSelectOptions,
  getCommunitySitePersonnelSelectOptions,
  assign,
  orderCancel,
} from "@/api/order/index";
const showSearch = ref(true);
const loading = ref(true);
const postList = ref([]);
const open = ref(false);
const title = ref("分派");

const total = ref(0);
const name = ref("");
const CommunityList = ref([]);
const people = ref([]);

const data = reactive({
  form: {
    workOrderCode: "",
  },
  queryParams: {
    page: 1,
    limit: 10,
    status: undefined,
    applyName: undefined,
    beginTime: undefined,
    endTime: undefined,
  },
  rules: {
    communitySiteId: [
      { required: true, message: "请选择社区驿站", trigger: "change" },
    ],
    communitySitePersonnelId: [
      { required: true, message: "请选择服务人员", trigger: "change" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

async function edit(data) {
  form.value.workOrderCode = data.workOrderCode;
  form.value.id = data.id;
  if (data.communitySiteId) {
    form.value.communitySiteId = data.communitySiteId;
    await CommunitySitePersonnelSelectOptions(data.communitySiteId);
    if (data.communitySitePersonnelId) {
      form.value.communitySitePersonnelId = data.communitySitePersonnelId;
    }
  }
  open.value = true;
}

const submitFormDebounceHandler = debounce(submitForm, 500);
function submitForm() {
  proxy.$refs["orderManageRef"].validate((valid) => {
    if (valid) {
      form.value.communitySiteName = CommunityList.value.find(
        (item) => item.id == form.value.communitySiteId,
      )?.name;
      form.value.communitySitePersonnelName = people.value.find(
        (item) => item.id == form.value.communitySitePersonnelId,
      )?.name;
      assign(form.value).then((res) => {
        proxy.$modal.msgSuccess("分派成功");
        open.value = false;
        cancel();
        getList();
      })
    }
  });
}
function CommunitySitePersonnelSelectOptions(id) {
  getCommunitySitePersonnelSelectOptions(id).then((res) => {
    people.value = res.communitySitePersonnelList;
  })
}

function handleDelete(row) {
  proxy.$modal
    .confirm("是否确认取消该工单？")
    .then(function () {
      return orderCancel(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("取消成功");
    })
    .catch(() => {});
}
function changeCommunity(value) {
  if (value) {
    CommunitySitePersonnelSelectOptions(value);
    form.value.communitySitePersonnelId=''
  } else {
    proxy.$modal.msgError("请选择社区驿站");
  }
}
function cancel() {
  form.value = {
    communitySiteId: "",
    communitySiteName: "",
    communitySitePersonnelId: "",
    communitySitePersonnelName: "",
    id: "",
    workOrderCode: "",
  };
  open.value = false;
  proxy.resetForm("orderManageRef");
}
/** 查询岗位列表 */
function getList() {
  if (queryParams.value.beginTime > queryParams.value.endTime) {
    proxy.$modal.msgError("开始时间不能大于结束时间");
    return false;
  }
  loading.value = true;
  workOrderList(queryParams.value).then((response) => {
    postList.value = response.page.list;
    total.value = response.page.totalCount;
    loading.value = false;
  })
}
function CommunitySiteSelectOptionsData() {
  getCommunitySiteSelectOptions().then((res) => {
    CommunityList.value = res.communitySiteList;
  })
}
function handleQuery() {
  getList();
}
function resetQuery() {
  queryParams.value = {
    page: 1,
    limit: 10,
    status: undefined,
    applyName: undefined,
    beginTime: undefined,
    endTime: undefined,
  };
  getList();
}
function handinfo(data) {
  router.push({
    path: `/ticketManagement/orderManagement/TicketDetails/` + data.id + '/2',
  });
}

function add() {
  router.push({
    path: `/ticketManagement/orderManagement/TicketDetails/0/1`,
  });
}
function handEdit(data) {
  router.push({
    path: `/ticketManagement/orderManagement/TicketDetails/` + data.id + '/1',
  });
}
CommunitySiteSelectOptionsData();
getList();
</script>
